<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
            position: relative;
        }
        div{
            width: 500px;
            background-color: aqua;
            position: absolute;
            left: 0;
            right: 0;
            margin: 80px auto;
            overflow: hidden;
            padding: 20px;
        }
        div>p{
            overflow: hidden;
        }
        div>p>span:nth-of-type(1){
            float: left;
        }
        div>p>span:nth-of-type(2){
            float: right;
        }
        textarea{
            width: 450px;
            height: 200px;
            margin: 22px;
        }
        button{
            float: right;
        }
        ul{
            margin-top: 50px;
            background-color: #666;
            padding: 0 50px;
        }
        li{
            list-style: none;
            border-bottom: 1px dashed gray;
            margin-top: 10px;
            height: 30px;
            font: 100 20px/30px "";
        }
    </style>
</head>

<body>
    <div>
        <p> <span>有什么新鲜事想告诉大家</span> <span>还可以输入140字</span> </p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul>
        </ul>
    </div>
</body>
</html>
<script>
    let $ = el => document.querySelector(el)

    let text = $('textarea')
    let ul = $('ul')
    let btn = $('button')

    btn.onclick = function(){
        publish()
    }
    // document.onkeydown = function(e){
    //     if (e.code == 'Enter') {
    //         publish()
    //     }
    // }
    let publish = () => {
        console.log(this);
        let li = document.createElement('li')
        li.innerHTML = text.value
        ul.appendChild(li)

        let del = document.createElement('button')
        del.innerHTML = '删除'
        del.style.float = 'right'
        del.style.marginTop = '5px'
        li.appendChild(del)
        del.onclick = function(){
            console.log(this);
            ul.removeChild(this.parentNode)
        }
        text.value = ''
    }


</script>


<!-- 拓展：
1. 实现右上角的字数计数功能
2. 实现回车发布功能 -->

